<template>
  <el-dialog
    title="添加筛选"
    class="notice-box"
    :visible.sync="visible"
    width="700px">
    <el-form :model="formData" label-position="top">
      <!-- <el-form-item label="筛选属性">
        <el-select v-model="formData.type" placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="筛选名称">
        <el-input v-model="formData.name" placeholder="请输入筛选名称"></el-input>
      </el-form-item>
      <el-form-item label="包括道具">
        <el-cascader
          v-model="selectorVal"
          :options="selector"
          :props="defaultProps"
          @change="change"
          :show-all-levels="false"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="上传图片" v-if="uploadImg">
        <uploadOwnImg v-model="formData.pic" width="140px" height="140px"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="saveNotice">提 交</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            defalut: false
        },
        propsType: {
            type: String,
            default: '0'
        },
        selector: {
            type: Array,
            default: () => []
        },
        propsItem: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            visible: this.show,
            showAll: true,
            uploadImg: false,
            selectorVal: '',
            formData: {
                gameId: '1106467070',
                type: 0,
                name: '',
                nodePath: '',
                pic: '',
                status: 1
            },
            options: [
                {
                    value: 1,
                    label: '道具'
                }, {
                    value: 0,
                    label: '类别'
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'nodePath',
                checkStrictly: true
            }
        }
    },
    watch: {
        propsType: {
            handler: function (type) {
                console.log('type', type)
                let val = false
                if (type === '0') {
                    val = true
                }
                this.uploadImg = !val
                this.$set(this.defaultProps, 'checkStrictly', val)
            },
            immediate: true
        },
        propsItem: {
            handler: function (val) {
                if (!val.id) {
                  this.formData = {
                      gameId: '1106467070',
                      type: 0,
                      name: '',
                      nodePath: '',
                      pic: '',
                      status: 1
                  }
                  this.selectorVal = ''
                  return
                }
                this.formData = {
                    ...val
                }
                let path = val.nodePath.split('-')
                let selectorVal = []
                path.reduce((prev, cur, index) => {
                    // selectorVal.push(item)
                    if (prev) {
                        selectorVal.push(prev + '-' + cur)
                    } else {
                        selectorVal.push(val.nodePath)
                    }
                    console.log('prev', prev, 'cur', cur, index)
                })
                selectorVal.unshift(path[0])
                this.selectorVal = selectorVal
            },
            deep: true
        },
        show (show) {
            this.visible = show
        },
        visible (show) {
            this.$emit('update:show', show)
        }
    },
    methods: {
        // 属性选择
        selectChange (data) {
            this.showAll = data === '0'
            this.$set(this.defaultProps, 'checkStrictly', this.showAll)
            console.log(this.defaultProps)
        },
        change (data) {
            this.formData.nodePath = data[data.length - 1]
        },
        saveNotice () {
            if (this.formData.name === '') {
                this.$message.error('筛选名称不能为空')
                return
            }
            this.$set(this.formData, 'type', Number(this.propsType))
            this.$emit('confirm', this.formData)
        }
    }
}
</script>
<style lang="scss" scoped></style>
